<template>
  <div class="c-service">
    <div class="title">
      <img src="./images/bg-1.png" alt="" />
      <span>综合服务</span>
    </div>
    <div class="service-content">
      <div class="list qr-list" :class="{ 'list-hide': tabIndex !== 0 }">
        <a-carousel :dots="false" :infinite="false" dotsClass="dots" arrows>
          <div slot="prevArrow" class="custom-slick-arrow" style="left: 0;zIndex: 1">
            <img src="@/assets/images/arrow-1.png" alt="" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 24px;zIndex: 1">
            <img src="@/assets/images/arrow-2.png" alt="" />
          </div>

          <div v-for="(item, idx) in list" :key="idx" class="carousel-block">
            <a class="item" v-for="(value, key) in item" :key="key" href="javascript:;" @click="value.functionType === '1' ? openQrcode(value.filePath) : $tools.cOpen({ url: value.functionUrl })">
              <div class="item-icon">
                <img :src="value.filePath" alt="" />
              </div>
              <div class="label">{{ value.functionName }}</div>
            </a>
            <template v-if="item.length < 6">
              <div class="item" v-for="value in 6 - item.length" :key="'key' + value"></div>
            </template>
          </div>
        </a-carousel>
      </div>
    </div>

    <a-modal :visible="qrcodeModal" class="qrcode-modal" :footer="null" :width="433" @ok="qrcodeModal = false" @cancel="qrcodeModal = false" :closable="false" centered>
      <img :src="qrcodeImg" alt="" />
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Carousel, Modal } from "ant-design-vue";
import CTabs from "../cTabs.vue";

@Component({
  name: "CService",
  components: {
    CTabs,
    AModal: Modal,
    ACarousel: Carousel
  }
})
export default class CService extends Vue {
  private tabIndex = 0;
  private qrcodeModal = false;
  private qrcodeImg = "";
  private dataSource: any[] = [];

  private async created() {
    await Promise.all([this.$api.IntservWeChatList(), this.$api.IntservLink()]).then((res: any[]) => {
      if (res[0] && res[0].code === 200) {
        this.dataSource = [...this.dataSource, ...res[0].data];
      }

      if (res[1] && res[1].code === 200) {
        this.dataSource = [...this.dataSource, ...res[1].data];
      }
    });
  }

  private get list() {
    const step = 6;
    const _return: any[] = Array.from({ length: Math.ceil(this.dataSource.length / step) }, () => []);
    for (let i = 0; i < _return.length; i++) {
      for (let j = i * step; j < i * step + step; j++) {
        if (this.dataSource[j]) {
          _return[i].push(this.dataSource[j]);
        } else {
          break;
        }
      }
    }
    return _return;
  }

  private tabsClick(e: Common.CTabsEmit) {
    this.tabIndex = e.activeIndex;
  }

  private openQrcode(path: string) {
    if (path) {
      this.qrcodeImg = "";
      this.$nextTick(() => {
        this.qrcodeModal = true;
        this.qrcodeImg = path;
      });
    } else {
      this.$message.warning("二维码图片地址是空的");
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.c-service {
  .scale(width, 500px);
  .service-content {
    position: relative;
    flex-direction: column;
    box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
    display: flex;
    .scale(height, 317px);
    overflow: hidden;
  }

  .title {
    color: #274972;
    display: flex;
    align-items: center;
    font-size: 24px;
    margin-bottom: 14px;
    img {
      .scale(width, 52px);
      .scale(height, 52px);
      margin-right: 14px;
    }
  }

  .carousel-block {
    width: 100%;
    flex-shrink: 0;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 12px;

    & > .item {
      .scale(width, 135px);
      .scale(margin-top, 24px);
      .scale(margin-bottom, 24px);
      text-align: center;
      flex-shrink: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .page-dot {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    li {
      cursor: pointer;
      width: 6px;
      height: 6px;
      background: rgba(0, 0, 0, 0.14);
      border-radius: 50%;
      margin-left: 7px;
      &:first-child {
        margin-left: 0;
      }
    }
    .active {
      background: #7195ea;
    }
  }

  .list {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    flex: 1;
    .scale(padding-top, 24px);
    // .scale(padding-left, 18px);
    // .scale(padding-right, 18px);
    // .scale(height, 273px);
  }

  .list-hide {
    height: 0;
    padding-top: 0;
  }

  .qr-list {
    .item-icon {
      .scale(width, 58px);
      .scale(height, 58px);
      margin: 0 auto;
      .scale(margin-bottom, 10px);
      border: 1px solid #64acfb;
      padding: 2px;
      img {
        max-width: 100%;
      }
    }
  }

  .link-list {
    .item-icon {
      .scale(height, 90px);
      margin: 0 auto;
      border: 1px solid #64acfb;
      padding: 2px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .label {
      position: absolute;
      bottom: 2px;
      left: 2px;
      right: 2px;
      background: rgba(0, 32, 60, 0.44);
      color: white;
      padding: 3px;
    }
  }
}

.qrcode-modal {
  img {
    width: 385px;
    height: 385px;
  }
}
</style>
